<template>
  <div class="common-layout h100">
    <el-container class="h100">
      <!-- 头部 -->
      <el-header class="app-header">
        <div class="header-left">
          <div class="logo"></div>
          <h3 class="system-title">中享思途-多功能健身会馆客户预约管理系统</h3>
        </div>
        <div class="header-right">
          <el-dropdown trigger="hover" placement="bottom-end">
            <div class="user-box">
              <el-avatar class="user-avatar" icon="User" size="small"></el-avatar>
              <span class="user-name">管理员</span>

            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="logout" icon="Logout">注销登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <!-- 主体 -->
      <el-container class="app-container">
        <el-aside :width="isCollapse ? '60px' : '220px'" class="app-aside">
          <div class="collapse-btn" @click="toggleCollapse">
            <el-icon>{{ isCollapse ? 'Right' : 'Left' }}</el-icon>
          </div>
          <el-menu
              class="app-nav"
              router
              text-color="#e69f66"
              active-text-color="#e08641"
              background-color="#fffbf5"
              default-active="/main/dashboard"
              :collapse="isCollapse"
              border-right="false"
          >
            <template v-for="(mi, index) in filteredMenuItems" :key="mi.name">
              <el-sub-menu v-if="Array.isArray(mi.children)" :index="mi.name">
                <template #title>
                  <el-icon class="menu-icon"><component :is="mi.icon"/></el-icon>
                  <span v-if="!isCollapse" class="menu-text">{{ mi.name }}</span>
                </template>
                <el-menu-item
                    v-for="smi in mi.children"
                    :key="smi.name"
                    :index="smi.url"
                    class="submenu-item"
                >
                  <el-icon class="submenu-icon"><component :is="smi.icon"/></el-icon>
                  <span class="submenu-text">{{ smi.name }}</span>
                </el-menu-item>
              </el-sub-menu>
              <el-menu-item v-else :index="mi.url" class="single-menu-item">
                <el-icon class="menu-icon"><component :is="mi.icon"/></el-icon>
                <span v-if="!isCollapse" class="menu-text">{{ mi.name }}</span>
              </el-menu-item>
              <div
                  v-if="index < filteredMenuItems.length - 1 && !isCollapse"
                  class="menu-divider"
              ></div>
            </template>
          </el-menu>
        </el-aside>

        <el-main class="app-content">
          <el-breadcrumb class="content-breadcrumb" separator=">">
            <el-breadcrumb-item :to="{ path: '/main/dashboard' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(item, idx) in $route.matched.slice(1)" :key="idx">
              {{ item.meta.title || item.path.split('/').pop() }}
            </el-breadcrumb-item>
          </el-breadcrumb>
          <div class="content-container">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<style scoped>
.h100 {
  height: 100vh;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 头部样式 - 奶油白基底+暖橙点缀 */
.app-header {
  height: 64px;
  background-color: #fffbf5;
  border-bottom: 1px solid #f9ebe0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: 0 1px 3px rgba(224, 134, 65, 0.05);
  transition: box-shadow 0.3s ease;
}

.app-header:hover {
  box-shadow: 0 2px 4px rgba(224, 134, 65, 0.08);
}

.header-left {
  display: flex;
  align-items: center;
}

.logo {
  height: 40px;
  width: 40px;
  background: url("@/assets/logo.png") no-repeat center center/contain;
  margin-right: 16px;
  transition: transform 0.3s ease;
  background-color: rgba(255, 251, 245, 0.8);
  border-radius: 6px;
}

.logo:hover {
  transform: scale(1.05);
}

.system-title {
  font-size: 16px;
  color: #e08641;
  font-weight: 500;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(224, 134, 65, 0.08);
}

/* 用户信息区 - 暖色调适配 */
.header-right {
  display: flex;
  align-items: center;
}

.user-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 50px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.user-box:hover {
  background-color: #f9ebe0;
}

.user-avatar {
  background-color: #f5d9b8;
  color: #e08641;
  border: 1px solid #f0ceaa;
}

.user-name {
  font-size: 14px;
  color: #e08641;
  display: none;
  @media (min-width: 1100px) {
    display: inline-block;
  }
}

.dropdown-icon {
  font-size: 12px;
  color: #e69f66;
}

/* 主体容器 */
.app-container {
  height: calc(100vh - 64px);
  display: flex;
}

/* 侧边栏 - 奶油底色+暖橙交互 */
.app-aside {
  background-color: #fffbf5;
  border-right: 1px solid #f9ebe0;
  transition: width 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.collapse-btn {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e69f66;
  cursor: pointer;
  border-bottom: 1px solid #f9ebe0;
  transition: background-color 0.3s ease;
}

.collapse-btn:hover {
  background-color: #f9ebe0;
}

/* 导航菜单 */
.app-nav {
  height: calc(100% - 48px);
  padding: 12px 0;
  background-color: transparent !important;
}

.menu-icon, .submenu-icon {
  font-size: 16px;
  margin-right: 8px;
  color: #e69f66;
}

/* 一级菜单项（无子菜单） */
.single-menu-item {
  height: 44px;
  line-height: 44px;
  font-size: 14px;
  padding-left: 16px !important;
  margin: 0 8px;
  border-radius: 6px;
  margin-bottom: 4px;
  transition: all 0.2s ease;
}

.single-menu-item:hover {
  background-color: #f9ebe0;
  color: #e08641 !important;
}

.single-menu-item.is-active {
  background-color: #f5d9b8;
  color: #e08641 !important;
  font-weight: 500;
  border-left: 3px solid #e08641;
}

/* 一级菜单项（有子菜单） */
.el-sub-menu__title {
  height: 44px;
  line-height: 44px;
  font-size: 14px;
  padding-left: 16px !important;
  margin: 0 8px;
  border-radius: 6px;
  margin-bottom: 4px;
  transition: all 0.2s ease;
}

.el-sub-menu__title:hover {
  background-color: #f9ebe0;
  color: #e08641 !important;
}

/* 子菜单容器 */
.el-sub-menu .el-menu {
  background-color: #fffbf5 !important;
  padding: 4px 0;
  border-top: 1px solid #f9ebe0;
}

/* 子菜单项 */
.submenu-item {
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  padding-left: 36px !important;
  margin: 0 8px;
  border-radius: 6px;
  margin-bottom: 2px;
  transition: all 0.2s ease;
}

.submenu-item:hover {
  background-color: #f9ebe0;
  color: #e08641 !important;
}

.submenu-item.is-active {
  background-color: #f5d9b8;
  color: #e08641 !important;
  font-weight: 500;
}

/* 菜单分隔条 - 暖色调弱化处理 */
.menu-divider {
  height: 1px;
  background-color: #f9ebe0;
  margin: 8px 16px;
  opacity: 0.8;
}

/* 内容区 - 奶油白背景+柔和卡片 */
.app-content {
  background-color: #fffdfa;
  padding: 20px;
  overflow-y: auto;
}

.content-breadcrumb {
  margin-bottom: 16px;
  font-size: 13px;
  color: #e08641;
}

.content-container {
  background-color: #fffbf5;
  border-radius: 8px;
  border: 1px solid #f9ebe0;
  padding: 24px;
  min-height: calc(100% - 48px);
  box-shadow: 0 2px 8px rgba(224, 134, 65, 0.03);
  transition: box-shadow 0.3s ease;
}

.content-container:hover {
  box-shadow: 0 2px 8px rgba(224, 134, 65, 0.06);
}

/* 滚动条美化 - 暖色调适配 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f9ebe0;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #f5d9b8;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #f0ceaa;
}
</style>
<script setup>
import { reactive, ref, computed } from "vue";
import { removeJwt } from "@/api/jwt.js";
import { useRouter } from "vue-router";

const router = useRouter();
const isCollapse = ref(false);

// 切换侧边栏折叠状态
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value;
};

// 从sessionStorage获取用户角色
const userRole = sessionStorage.getItem('userRole') || 'admin';

// 定义完整的菜单数据
const allMenuItems = reactive([
  { name: "数据看板", url: "/main/dashboard", icon: "DataBoard" },
  {
    name: "客户管理",
    icon: "UserFilled",
    children: [
      { name: "客户列表", url: "/main/customer", icon: "User" },
    ]
  },
  {
    name: "团课课程",
    icon: "Notebook",
    children: [
      { name: "课程列表", url: "/main/course", icon: "List" },
      { name: "课程日历", url: "/main/calendar", icon: "Calendar" }
    ]
  },
  {
    name: "系统管理",
    icon: "Setting",
    children: [
      { name: "角色权限", url: "/main/admin", icon: "Key" }
    ]
  },
  {
    name: "教练管理",
    icon: "UserCheck",
    children: [
      { name: "教练列表", url: "/main/coach", icon: "UserFilled" }
    ]
  },{
    name: "私课管理",
    icon: "Guide",
    children: [
      { name: "私课列表", url: "/main/personalTrain", icon: "Collection" }
    ]
  }
]);

// 为每个菜单项添加角色权限信息
const menuItemsWithRoles = reactive([
  {
    name: "数据看板",
    url: "/main/dashboard",
    icon: "DataBoard",
    roles: ['admin'] // 只有管理员可以访问
  },
  {
    name: "客户管理",
    icon: "UserFilled",
    children: [
      { name: "客户列表", url: "/main/customer", icon: "User" },
    ],
    roles: ['admin', 'coach'] // 管理员和教练可以访问
  },
  {
    name: "团课课程",
    icon: "Notebook",
    children: [
      { name: "课程列表", url: "/main/course", icon: "List" },
      { name: "课程日历", url: "/main/calendar", icon: "Calendar" }
    ],
    roles: ['admin', 'coach'] // 所有角色都可以访问
  },
  {
    name: "系统管理",
    icon: "Setting",
    children: [
      { name: "角色权限", url: "/main/admin", icon: "Key" }
    ],
    roles: ['admin'] // 只有管理员可以访问
  },
  {
    name: "教练管理",
    icon: "UserCheck",
    children: [
      { name: "教练列表", url: "/main/coach", icon: "UserFilled" }
    ],
    roles: ['admin'] // 只有管理员可以访问
  },
  {
    name: "私课管理",
    icon: "Guide",
    children: [
      { name: "私课列表", url: "/main/personalTrain", icon: "Collection" }
    ],
    roles: ['admin', 'coach'] // 管理员和教练可以访问
  }
]);

// 根据用户角色过滤菜单项
const filteredMenuItems = computed(() => {
  return menuItemsWithRoles.filter(item => {
    // 如果菜单项没有定义roles属性，则所有角色都可以访问
    if (!item.roles) return true;
    // 检查用户角色是否在允许的角色列表中
    return item.roles.includes(userRole);
  });
});

// 注销功能（带确认提示，保持交互一致性）
const logout = () => {
  ElMessageBox.confirm(
      "确定要注销登录吗？注销后需重新登录",
      "确认注销",
      {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "info",
        confirmButtonClass: "el-button--info",
        cancelButtonClass: "el-button--text"
      }
  )
      .then(() => {
        removeJwt();
        sessionStorage.removeItem('userRole'); // 同时清除用户角色信息
        router.push("/login");
        ElMessage.success("注销成功");
      })
      .catch(() => {
        ElMessage.info("已取消注销");
      });
};

// 引入Element Plus组件
import {
  ElAvatar, ElDropdown, ElDropdownMenu, ElDropdownItem,
  ElIcon, ElMessageBox, ElMessage, ElBreadcrumb, ElBreadcrumbItem
} from "element-plus";
import "element-plus/theme-chalk/el-message-box.css";
import "element-plus/theme-chalk/el-message.css";
import "element-plus/theme-chalk/el-dropdown.css";
</script>
